<template>
    <div class="main">
        <van-nav-bar title="积分商城" left-text="主页" left-arrow @click-left="$router.push('/home/home')" fixed />
        <van-cell v-for="item in list" :key="item" :title="item" />
        <div class="header">
            <div class="head">
                <head-img :src="`${URL}${userInfo.avatar}`" size="80px"></head-img>
                <h1>{{ userInfo.username }}</h1>
            </div class="integral">
            <div>
                <p>可用积分；{{ userInfo.integral }}</p>
            </div>
        </div>
        <div>
            <ul class="vip-list">
                <li class="vip-item" @click="onGood(22)">
                    <img src="../../assets/images/shangcheng/viponeday.png" alt="">
                    <h3>泊车相见3日会员体验卡</h3>
                    <p>10积分</p>
                </li>
                <li class="vip-item" @click="onGood(23)">
                    <img src="../../assets/images/shangcheng/vipsantian.png" alt="Image 2">
                    <h3>泊车相见7日会员体验卡</h3>
                    <p>20积分</p>
                </li>
                <li class="vip-item" @click="onGood(24)">
                    <img src="../../assets/images/shangcheng/vipyueka.png" alt="Image 3">
                    <h3>泊车相见月卡体验卡</h3>
                    <p>80积分</p>
                </li>
            </ul>
        </div>

        <div class="shop">
            <ul>
                <li v-for="(item, index) in dataSource.list" :key="index" @click="onGood(item.id)">
                    <van-card :price="`${item.price}积分`" :desc="`${item.product_description}`"
                        :title="`${item.product_name}`" :thumb="`${URL}/images/shangcheng/${item.product_image}`"
                        boolean="true" />
                </li>
            </ul>
        </div>

        <van-tabbar v-model="active">
            <van-tabbar-item icon="wap-home" replace to="/home/home">主页</van-tabbar-item>
            <van-tabbar-item icon="comment" replace to="/message/contactreinfo" dot>消息</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart" replace to="/shop/shop">商店</van-tabbar-item>
            <van-tabbar-item icon="friends" replace to="/user/userinfo">我的</van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<script setup>
// 导入依赖

import { POST, GET } from "../../tools/fetch";
import { shopApi, baseURL } from '../../tools/api.js';
import { useRouter } from 'vue-router';
const router = useRouter();
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();

import VueLs from '../../tools/ls';
const userInfo = VueLs.get('userInfo') || {};

const URL = baseURL;

const onGood = (id) => {
    const param = id;
    router.push({ name: 'shopinfo', query: { id: param } });
}
const dataSource = ref({
    list: []
})


// 页面加载时调用
const onLoad = async () => {
    console.log(userStore);

    const resResult = await GET({
        api: shopApi.list
    })
    console.log(resResult);
    dataSource.value.list = resResult.data

}
onLoad()


</script>

<style lang="less" scoped>
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    margin: 40px auto;
    text-align: center;
}

.head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.head-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

h1 {
    margin: 10px 0 0 0;
    font-size: 24px;
    color: #333;
}

.header p {
    margin: 5px 0 0 0;
    font-size: 16px;
    color: #666;
}

.vip-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.vip-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    text-align: center;
    flex-basis: calc(33.333% - 20px);
}

.vip-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.vip-item h3 {
    font-size: 14px;
    margin: 10px 0;
}

.vip-item p {
    font-size: 12px;
    color: #555;
    margin: 0;
}

.shop {
    margin-bottom: 10vh;

    ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

    }

    li {
        margin: 10px;
        width: 96%;
    }

    .van-card {
        border: 1px solid #000;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

}
</style>